<template>
  <div class="form">
    <h1>form</h1>

    <h2>input</h2>
    <el-container>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-input v-model="user" clearable placeholder="用户名"></el-input>
            <el-input
              v-model="pass"
              placeholder="密码"
              show-password
            ></el-input>
            <el-input
              placeholder="带图标的"
              suffix-icon="el-icon-phone"
            ></el-input>
            <el-input
              size="mini"
              placeholder="带图标的"
              suffix-icon="el-icon-star-off"
            ></el-input>
            <el-input placeholder="123">
              <template slot="prepend">Http://</template>
            </el-input>
            <el-button>注册</el-button>
          </el-col>

          <el-col :span="12">
            <el-input
              type="textarea"
              :row="2"
              autosize
              placeholder="请输入内容"
              v-model="textarea"
            >
            </el-input>

            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入内容"
              v-model="textarea2"
            >
            </el-input>
          </el-col>
        </el-row>
      </el-main>
    </el-container>

    <h2>Indeterminate 状态</h2>
    <p>{{ cities }}</p>
    <p>{{ checkedCities }}</p>
    <p>{{ checkAll }}</p>
    <p>{{ isIndeterminate }}</p>
    <el-checkbox
      :indeterminate="isIndeterminate"
      v-model="checkAll"
      @change="handleCheckAllChange"
      >全选</el-checkbox
    >

    <el-checkbox-group
      v-model="checkedCities"
      @change="handleCheckedCitiesChange"
    >
      <el-checkbox v-for="city in cities" :label="city" :key="city">
        {{ city }}
      </el-checkbox>
    </el-checkbox-group>

    <h2>Checkbox Group</h2>
    <p>{{ arr }}</p>
    <el-checkbox-group v-model="arr">
      <el-checkbox label="复选框1"></el-checkbox>
      <el-checkbox label="复选框2"></el-checkbox>
      <el-checkbox label="复选框3"></el-checkbox>
      <el-checkbox label="复选框4" disabled></el-checkbox>
      <el-checkbox label="选中且禁用" disabled></el-checkbox>
    </el-checkbox-group>

    <h2>Checkbox</h2>
    <p>{{ checked }}</p>
    <el-checkbox v-model="checked">同意注册协议</el-checkbox>

    <h2>Radio</h2>
    <p>{{ radio4 }}</p>
    <el-radio-group v-model="radio4" size="mini" @change="r4">
      <el-radio-button label="上海"></el-radio-button>
      <el-radio-button label="北京"></el-radio-button>
      <el-radio-button label="广州"></el-radio-button>
      <el-radio-button label="深圳"></el-radio-button>
    </el-radio-group>
  </div>
</template>

<script>
const cityOptions = ["上海", "北京", "广州", "深圳"];
export default {
  name: "Form",
  data() {
    return {
      radio4: "上海",
      checked: true,
      arr: ["复选框1", "复选框2"],
      checkAll: false,
      checkedCities: ["上海", "北京"],
      cities: cityOptions,
      isIndeterminate: true,
      user: "",
      pass: "",
      textarea: "",
      textarea2: "",
    };
  },
  methods: {
    r4(e) {
      console.log("选中的是:" + e);
      console.log("最新结果是：" + this.radio4);
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
  },
};
</script>

<style scoped>
</style>